import classnames from 'classnames'
import type { FC } from 'react'
import React from 'react'
import { withNativeProps } from '../../../src/utils/native-props'
import { type ComponentProps } from '../../global/common-style'
import Mask from '../mask'

const classPrefix = `gd-modal`

export type ModalProps = {
  /** 是否显示模态框 */
  open: boolean
  /** 触发关闭时的事件 */
  onClose?: () => void
  /** 点击取消按钮触发的事件 */
  onCancel?: () => void
  /** 点击确认按钮触发的事件 */
  onConfirm?: () => void
  /** 元素的内容 */
  message?: string
  /**	取消按钮的文本 */
  cancelText?: string
  /**	确认按钮的文本 */
  confirmText?: string
} & ComponentProps

export const Modal: FC<ModalProps> = (props) => {
  return withNativeProps(
    props,
    <Mask
      open={props.open}
      onClose={() => {
        props.onClose && props?.onClose()
      }}
    >
      <div className={`${classPrefix}`}>
        <div className={`${classPrefix}-contain`}>
          <div className={`${classPrefix}-message`}>
            <div className={`${classPrefix}-text`}>{props?.message}</div>
          </div>
          <div className={`${classPrefix}-btnGroup`}>
            <div
              className={classnames(
                `${classPrefix}-item`,
                `${classPrefix}-rightLine`
              )}
              onClick={() => {
                props.onCancel && props?.onCancel()
              }}
            >
              {props.cancelText ?? '取消'}
            </div>
            <div
              className={`${classPrefix}-item`}
              onClick={() => {
                props.onConfirm && props?.onConfirm()
              }}
            >
              {props.confirmText ?? '确定'}
            </div>
          </div>
        </div>
      </div>
    </Mask>
  )
}
